var ULBoxMap = new Object();
var ULBox = function(opt){
	this.target = opt.target?opt.target:'ulList';
	this.id = '';			//div 对应的id
	
	this.onfocus = opt.onfocus?opt.onfocus:false;		//焦点在导航上
	this.onblur = opt.onblur?opt.onblur:false;		//焦点在item上
	this.onclick = opt.onclick?opt.onclick:false;		//点击事件
	this.moveRight = opt.moveRight?opt.moveRight:false;		//离开事件
	this.moveLeft = opt.moveLeft?opt.moveLeft:false;		//离开事件
	this.moveUp = opt.moveUp?opt.moveUp:false;		//离开事件
	this.moveDown = opt.moveDown?opt.moveDown:false;		//离开事件
	this.keyDone = opt.keyDone?opt.keyDone:false;		//离开事件
	
	this.disNum = 7;
	this.itemWidth = 160;
	
	$.extend(this,opt);				//
	this.curItemId = 0;
	this.focusItemId = 0;
	this.curLeftId = 0;
	this.dataList = null;
	
	if(opt.formatHtml){
		this.formatHtml = opt.formatHtml;
	}
	
	this.init();
	ULBoxMap[this.target] = this;
	KEY.TYPE[this.target] = this.keyRecv;	
}

ULBox.prototype = {
	init:function(){
		var html = '';
		html += '<div class="_ulBox">';
			html += '<div class="_ul">';
				html += '<div class="_list" id="'+this.target+'List">';
				html += '</div>';
			html += '</div>';
			html += '<div class="_toLeft">&nbsp;</div>';
			html += ' <div class="_toRight">&nbsp;</div>';
		html += '</div>';
		$('#'+this.id).html(html);
	},
	setFocus:function(id){
		if(id){
			$('#'+this.target+'-a-'+id).focus();
		}else{
			$('#'+this.target+'-a-'+this.focusItemId).focus();
		}
	},
	Click:function(id){
		if(!id){
			id = this.curItemId;
			if(!id){
				id = 1;
			}
		}
		$('#'+this.target+'-a-'+id).click();
	},
	setDataList:function(list,onfocus){
		if(!list) list = new Array();
		this.dataList = list;
		this.focusItemId = 1;
		this.curItemId = 0;
		this.curLeftId = 0;
		
		$('#'+this.target+'List').css('left',0).width(this.dataList.length *this.itemWidth+this.itemWidth);
		$('#'+this.id+' ._toLeft').hide();
		$('#'+this.id+' ._toRight').hide();
		
		this.refreshContent();
		if(onfocus){
			$('#'+this.target+'-a-'+this.focusItemId).focus();
		}
	},
	refreshContent:function(){
		var con = '';
		for(var i = 0 ;i<this.dataList.length;i++){
			con +='<div class="_li">'+this.formatHtml(this.dataList[i],i+1)+'</div>';
		}
		$('#'+this.target+'List').html(con);
		var _this = this;
		$('#'+this.target+'List a').blur(function(e) {
            var idArr = this.id.split('-');
			var tar = parseInt(idArr[2]);
			var data =_this.dataList[tar - 1];
			
			if(tar == _this.curItemId){
				$(this).parent().removeClass('_curLi').addClass('_clickLi');
			}else{
				$(this).parent().removeClass('_curLi').addClass('_li');
			}
			
			if(_this.onblur){
				_this.onblur(data,tar,this);
			}
        }).focus(function(e) {
			$(this).parent().removeClass('_li').removeClass('_clickLi').addClass('_curLi');
			
			var idArr = this.id.split('-');
			var tar = parseInt(idArr[2]);
			var data =_this.dataList[tar - 1];
			
			if(_this.focusItemId > tar){			//向左
				
				if(tar - _this.curLeftId == 1 && tar!= 1){
					_this.curLeftId --; $.log(_this.curLeftId);
					$('#'+_this.target+'List').animate({"left":0-_this.curLeftId*_this.itemWidth});
				}
			}else if(_this.focusItemId < tar){		//向右
				if(tar - _this.curLeftId  == _this.disNum && tar != _this.dataList.length){
					_this.curLeftId ++ ;
					$('#'+_this.target+'List').animate({"left":0-_this.curLeftId*_this.itemWidth});
				}
			}
			_this.focusItemId = tar;
			 
			 if(_this.curLeftId > 0){
				 $('#'+_this.id+' ._toLeft').show();
			}else{
				$('#'+_this.id+' ._toLeft').hide();
			}
			if(_this.curLeftId + _this.disNum < _this.dataList.length){
				$('#'+_this.id+' ._toRight').show();
			}else{
				$('#'+_this.id+' ._toRight').hide();
			}
			if(_this.onfocus){
				_this.onfocus(data,tar,this);
			}
			 
			KEY.CURTYPE = _this.target;
		}).click(function(e) {
			var idArr = this.id.split('-');
			var tar = parseInt(idArr[2]);
			var data = _this.dataList[tar - 1];
			if( _this.curItemId!=tar || true){
				if(_this.curItemId > 0 && _this.curItemId!=tar){
					var oldA = $('#'+_this.target+'-a-'+_this.curItemId);
					oldA.parent().removeClass('_clickLi').addClass('_li');
				}
				_this.curItemId = tar;
				if(_this.onclick){
					_this.onclick(data,tar);
				}
			}
			return false;
		});
	},
	formatHtml:function(data,id){
		return '<a id="'+this.target+'-a-'+id+'" href="#">'+id+'</a>';
	},
	isAnimate:function(){
		var listBox = $('#'+this.target+'List');
		return listBox.is(":animated");
	},
	doBlur:function(a){
		var a2 = document.activeElement;
		if(a2!=a && KEY.CURTYPE == this.target){
			KEY.CURTYPE = false;
		}
	},
	keyRecv:function(key,keyName,a){
		var id = a.id;
		var idArray = id.split('-');
		var _this = ULBoxMap[idArray[0]];
		var tar = parseInt(idArray[2]);
		
		if(keyName == 'KEY_RIGHT'){
			if(_this.isAnimate()){return ;}
			tar ++;
			if(tar <=_this.dataList.length){
				$('#'+_this.target+'-a-'+tar).focus();
			}else{
				if(_this.moveRight){
					_this.moveRight();
					_this.doBlur(a);
				}
			}
		}else if(keyName == 'KEY_LEFT'){
			if(_this.isAnimate()){return ;}
			tar --;
			if(tar >0){
				$('#'+_this.target+'-a-'+tar).focus();
			}else{
				if(_this.moveLeft){
					_this.moveLeft();
					_this.doBlur(a);
				}
			}
		}else if(keyName == 'KEY_DOWN'){
			if(_this.moveDown){
				_this.moveDown();
				_this.doBlur(a);
			}
		}else if(keyName == 'KEY_UP'){		//向上按
			if(_this.moveUp){
				_this.moveUp();
				_this.doBlur(a);
			}
		}else{
			if(KEY[keyName]){
				KEY[keyName](key,KEY.KEYBOARD,a);
				return ;
			}
		}
	},
}